import { Breadcrumb, message, Divider, Modal, Input, Select, Form, Button, Table, Space, Dropdown, Menu } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './index.scss'
import React, { useState, useEffect } from 'react';
import { Navigate, useNavigate } from "react-router-dom";
import setTime from '../../../../utils/zhangqiang/setTime'
import request from '../../../../api/full-reduct_zq'


const { Option } = Select;

const { confirm } = Modal;

const Fullreduct = () => {
    // 分页
    const showTotal = (total) => `数量 ${total} 条`;
    const [tabledata, settableData] = useState([])
    const [searchForm] = Form.useForm()
    const [search, setSearch] = useState('');
    const navigate = useNavigate()
    // 表格
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    //一上来发送请求 请求数据
    const [data, setData] = useState([])

    //获取数据
    useEffect(() => {
      
        request.findAllFullFreeShipping().then((res) => {

            // 异步，没法打印
            setData(res.data)
            let _data = [...data]
            for (let i = 0; i < res.data.length; i++) {
                _data[i] = { ...res.data[i] }
                _data[i].startTime = setTime(res.data[i].startTime)
            }
            settableData(_data)
        })
     
    }, [])
// 编辑
const editmodel=(datas) => {
     navigate('/home/market/full-reduct/edit-full-reduct',{state:datas})
    }
    // 表头
    const columns = [
        {
            title: '活动名称',
            dataIndex: 'freeShippingName',
            key: 'freeShippingName'
        },
        {
            title: '活动类型',
            dataIndex: 'freeShippingType',
            key: 'freeShippingType'
        },
        {
            title: '活动内容',
            dataIndex: 'freeShippingContent',
            key: 'freeShippingContent'
        },
        {
            title: '适用范围',
            dataIndex: 'scopeOfApplication',
            key: 'scopeOfApplication'

        }, {
            title: '活动状态',
            dataIndex: 'freeShippingState',
            key: 'freeShippingState',
        
        },
        {
            title: '有效期',
            dataIndex: 'startTime',
            key: 'startTime',
            render: (_, record) => <Space>
                <span>{record.startTime + '-' + record.endTime}</span>
            </Space>
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => <Space size="middle">
                <a onClick={()=>{editmodel(record)}}>编辑</a>
                <a onClick={success}>复制</a>
                <a onClick={() => { showConfirm(record.fullDecreaseId) }} >停用</a>
            </Space>
        },
    ];

    // 停用对话框
    const destroyAll = () => {
        Modal.destroyAll();
    };
    // 停用
    const showConfirm = (id) => {
        console.log(id);
       
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: <div onClick={destroyAll}>停用折扣活动<p style={{ padding: '10px 35px' }}>确认停用此折扣活动吗</p></div>,
            onOk() {

              
                request.updateFullFreeShippingState(id).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        setData(res.data)
                        console.log('请求成功');
                    } else {
                        console.log('停用失败1');
                    }
                })
            },
            onCancel() {
                console.log('取消');
            },
        });
    }
    // 复制成功
    const success = () => {
        message.success({
            content: '复制折扣活动成功',
            className: 'custom-class',
            style: {
                marginTop: '20vh',
            },
        });
    };
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    // 表格行是否可选择
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // Form表单的宽度设置
    const layout = {
        labelCol: {
            span: 12,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 使用状态
    const onGenderChange = (value) => {
        switch (value) {
            case 'male':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, man!',
                });
                return;

            case 'female':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, lady!',
                });
                return;

            case 'other':
                this.formRef.current.setFieldsValue({
                    note: 'Hi there!',
                });
        }
    }

    // 完成查询或重置
    const onFinish = (values) => {
        console.log(values);
        // let search1 = searchForm.getFieldValue()
        // setSearch(values.fullDecreaseName);

        // console.log(search1);
        request.findAllFullFreeShipping(values).then((res) => {
            console.log(res);

            settableData(res.data)
        }
        )

    };


    const fulldemo1 = () => {
        // 跳转到满x元减活动
        navigate('/home/market/postage/new-postage-edit')
        console.log(1);
    }
    const fulldemo2 = () => {
        // 跳转到满x元减活动
        navigate('/home/market/postage/new-postage-edit')
        console.log(2);
    }
  

    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <a onClick={fulldemo1} rel="noopener noreferrer" >
                            满X元减活动
                        </a>
                    ),
                },
                {
                    key: '2',
                    label: (
                        <a onClick={fulldemo2} rel="noopener noreferrer" >
                            满X元折活动
                        </a>
                    ),
                },
              
            ]
            }
        />
    );
    return <div className='header-1'>
        <div className='head-top' >
            <div>
                {/* 面包屑满减 */}
                <div className='sale'>
                    <Breadcrumb>
                        <Breadcrumb.Item>营销</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            满包邮
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            满包邮活动
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='header-left'>满包邮</div>
            </div>
            <Divider plain></Divider>
            {/* 状态 */}
            <div className='state'>
                <Form {...layout} name="control-ref" onFinish={onFinish} form={searchForm} layout='inline' labelCol={{ span: 10 }
                }>
                    <Form.Item
                        name="activityState"
                        label="状态"
                    >
                        <Select
                            placeholder="请选择使用状态"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="全部">全部</Option>
                            <Option value="未开始">未开始</Option>
                            <Option value="进行中">进行中</Option>
                            <Option value="已结束">已结束</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="fullDecreaseName" label="名称">
                        <Input placeholder="请输入名称" />
                    </Form.Item>
                    <div className='set' >
                        <div className='check'>
                            <Button style={{ padding: '0 20px' }} type="primary" htmlType='submit' >查询</Button>
                        </div>
                        <Button style={{ padding: '0 20px' }}>重置</Button>
                    </div>
                </Form>
            </div>
        </div>
        {/* 表格 */}
        <div className='table-cont'>
            <div className='table-new'>
                <h3>满减满折活动列表</h3>
                <div>
                    <Dropdown
                        overlay={menu}
                        placement="bottomLeft"
                        arrow={{
                            pointAtCenter: true,
                        }}
                        className='new'
                    >
                        <Button type="primary">+新建</Button>
                    </Dropdown>
                    <Button>批量操作</Button>
                </div>
            </div>
            <div
                style={{
                    marginBottom: 16,
                }}
            >
                <span
                    style={{
                        marginLeft: 8,
                    }}
                >

                </span>
            </div>
            <Table rowKey={(record) => record.fullDecreaseId} rowSelection={rowSelection} columns={columns} dataSource={tabledata}
                pagination={{
                    total: 'tabledata.length',
                    showTotal: showTotal,
                    showSizeChanger: true,
                    showQuickJumper: true,
                }} />
        </div>
    </div>
}


export default Fullreduct